import './app1.css'
import $ from 'jquery'

const eventBus = $({})
//所有数据相关的都放到m
const m = {
    data: {
        n: parseInt(localStorage.getItem('x') || 100)
    },
    update(data){
        Object.assign(m.data,data) 
        //把m里面的data全部换成update里面的参数data
        eventBus.trigger('m:update')
    }
}

//所有跟视图相关的都放到v
const v = {
    el:null,
    html: `
    <div>
                <div class="output">
                    <span id="number">{{n}}</span>
                </div>
                <div class="actions">
                    <button id="add1">+1</button>
                    <button id="minus1">-1</button>
                    <button id="mul2">*2</button>
                    <button id="divide2">/2</button>
                </div>
                
    </div >`,
    init(el) {
        v.el = $(el) //
    },
    render(n) {  //第一次渲染html
        if (v.el.length !== 0) {
            v.el.empty()
        } 
        $(v.html.replace('{{n}}', n)).appendTo($(v.el))
    },
}
//其他都放到c
const c = {
    init(el) {
        v.init(el)
        v.render(m.data.n)
        c.autoBindEvents()
        eventBus.on('m:update',()=>{ //名字不能有空格
            v.render(m.data.n)
            localStorage.setItem('x', m.data.n)
        })
    },
    events: {
        'click #add1':'add',
        'click #minus1':'minus',
        'click #mul2':'mul',
        'click #divide2':'divide'
    },
    add() {
        m.update({n:m.data.n += 1})
    },
    minus() {
        m.update({n:m.data.n -= 1})
    },
    mul() {
        m.update({n:m.data.n *= 2})
    },
    divide() {
        m.update({n:m.data.n /= 2})
    },
    autoBindEvents(){
        for(let key in c.events){
            const value = c[c.events[key]]
            const spaceIndex = key.indexOf(' ')
            const part1 = key.slice(0,spaceIndex)
            const part2 = key.slice(spaceIndex+1)
            v.el.on(part1,part2,value)
        }
    }

}

export default c


